<template>
  <div class="budgetList">
    <div class="table-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>预算管理</el-breadcrumb-item>
        <el-breadcrumb-item>一键预算</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="selectBox">
      卖场：
      <el-select
        v-model="marketId"
        style="margin-right:20px;"
        clearable
        @change="selectMarket"
        filterable
        placeholder="请选择卖场"
      >
        <el-option
          v-for="item in marketList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-date-picker
        v-model="valueTime"
        type="daterange"
        @change="selectTime"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <div class="searchBox">
        <el-input placeholder="请输入查询信息" clearable @input="clearInput" v-model="keyword"></el-input>
        <el-button type="primary" size="medium" @click="searchFn">搜索</el-button>
      </div>
    </div>
    <div style="padding:20px;background:#fff;">
      <el-table
        border
        :data="tableData"
        style="width: 100%">
        <el-table-column
          align="center"
          prop="id"
          label="ID"
          width="80">
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="姓名"
          width="auto">
        </el-table-column>
        <el-table-column
          prop="phone"
          align="center"
          label="手机">
        </el-table-column>
        <el-table-column
          prop="area"
          align="center"
          width="110"
          label="面积">
        </el-table-column>
        <el-table-column
          prop="parlour_num"
          align="center"
          width="110"
          label="客厅数">
        </el-table-column>
        <el-table-column
          prop="bedroom_num"
          align="center"
          width="110"
          label="卧室数">
        </el-table-column>
        <el-table-column
          prop="toilet_num"
          align="center"
          width="110"
          label="卫生间">
        </el-table-column>
        <el-table-column
          prop="balcony_num"
          align="center"
          width="110"
          label="阳台数">
        </el-table-column>
        <el-table-column
          prop="estate"
          align="center"
          label="小区">
        </el-table-column>
        <el-table-column
          prop="create_time"
          align="center"
          label="创建时间">
          <template slot-scope="scope">
            <div>{{$moment(scope.row.create_time*1000).format('yyyy-MM-DD HH:mm:ss')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="market_name"
          align="center"
          label="所属卖场">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-popconfirm title="确定删除该预算吗？" @confirm="delBudget(scope.row.id)">
              <el-button slot="reference" size="mini" type="danger">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBox">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data(){
    return{
      tableData:[],
      page:1,
      pagesize:10,
      total:0,
      marketId: '', //卖场id
      marketList: [],
      keyword:'',
      start_date:'',
      end_date:'',
      valueTime:[]
    }
  },
  mounted(){
    this.getTableList()
    this.remoteMethod()
  },
  methods:{
    // 获取卖场列表
    remoteMethod() {
      this.$http.post("/api/root/Market/marketList").then((res) => {
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },
    // 选择卖场
    selectMarket() {
      this.page = 1;
      this.pagesize = 10;
      this.getTableList();
    },

    // 选择时间
    selectTime(){
      console.log(this.valueTime);
      if(this.valueTime && this.valueTime.length){
        this.start_date = this.$moment(this.valueTime[0]).format('yyyy-MM-DD');
        this.end_date = this.$moment(this.valueTime[1]).format('yyyy-MM-DD');
      }else{
        this.start_date = '';
        this.end_date = ''
      }
      this.page = 1;
      this.pagesize = 10;
      this.getTableList()
    },

    // 获取一键预算数据
    getTableList(){
      let params = {
        market_id:this.marketId,
        keyword:this.keyword,
        start_date:this.start_date,
        end_date:this.end_date,
        page:this.page,
        pagesize:this.pagesize
      }
      this.$http.post('/api/root/DesignOffer/index',params).then(res=>{
        if(res.code==1){
          this.tableData = res.data.list?res.data.list:[]
          this.total = res.data.total
        }
      })
    },

    // 删除一键预算
    delBudget(id){
      this.$http.post('/api/root/DesignOffer/del',{id}).then(res=>{
        if(res.code==1){
          this.$message.success('删除成功')
          this.getTableList()
        }else{
          this.$message.warning(res.msg)
        }
      })
    },

    // 搜索
    searchFn(){
      this.page = 1;
      this.pagesize = 10;
      this.getTableList()
    },
    // 清除输入框
    clearInput(){
      this.page = 1;
      this.pagesize = 10;
      if(this.keyword == ''){
        this.getTableList()
      }
    },

    // 分页
    handleSizeChange(val){
      this.page = 1
      this.pagesize = val
      this.getTableList()
    },
    handleCurrentChange(val){
      this.page = val
      this.getTableList()
    }

  }
}
</script>
<style lang="less" scoped>
.budgetList {
  height: 100%;
  background-color: #f5f5f5;
  .table-breadcrumb {
    height: 6%;
    min-height: 40px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 10px;
  }
  .selectBox{
    margin: 30px 0 10px; 
    padding: 20px; 
    background: #fff;
    display: flex;
    align-items: center;
    .searchBox{
      margin-left: auto;
      display: flex;
      align-items: center;
    }
  }
  .pageBox{
    padding-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>